<template>
  <div class="main">
    <div class="title">
      <div class="blue"></div>
      <div class="name">接入工厂类型</div>
    </div>
    <div id="coneChart" style="height:85%;width:95%;margin:0 auto"></div>
  </div>
</template>
<style scoped>
.main {
  height: 30vh;
  width: 25%;
  background-color: #0d2b55;
  margin-top: 5px;
  margin-left: 10px;
  cursor: pointer;
}

.main .title {
  height: 11%;
  width: 100%;
  margin-top: 5px;
  margin-left: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.blue {
  background-color: #2997e4;
  width: 1%;
  height: 25px;
}

.name {
  flex: 1;
  font-size: 17px;
  color: white;
}
</style>
<script>
import * as echarts from 'echarts';

export default {
  mounted() {
    this.initConeChart();
  },
  methods: {
    initConeChart() {
      const chartDom = document.getElementById('coneChart');
      const myChart = echarts.init(chartDom);

      const option = {
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(13,43,85,0.9)',
          borderColor: '#2997e4',
          textStyle: {
            color: '#fff',
            fontSize: 14
          },
          formatter: '{b} : {c}'  // 显示格式示例："锅炉 : 10家"
        },
        xAxis: {
          type: 'category',
          data: ['锅炉', '环保', '电厂', '供暖','采掘','农业'],
          axisLabel: {
            color: '#fff'
          }
        },
        yAxis: {
          type: 'value',
          min: 0,
          max: 40,
          interval: 10, // 固定刻度间隔为10
          axisLabel: {
            color: '#fff'
          }
        },
        series: [{
          data: [10,15,18,22,29,32],
          type: 'bar',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#37a2da' },
              { offset: 1, color: '#7b3ae0' }
            ]),
            borderRadius: [10, 10, 0, 0]
          },
          barWidth: '30%'
        }],
        grid: {
          top: '15%',
          left: '10%',
          right: '10%',
          bottom: '15%'
        }
      };

      myChart.setOption(option);
    }
  }
};
</script>
